<template>
  <div class="question-area">
    <span class="number">{{ number }}</span>
    <span class="title"> {{ question.title }} </span>
    <span class="is-required" v-if="question.must"> * </span>
  </div>
  <div class="answer-area">
    <el-checkbox-group v-model="answer" @change="changeAnswer">
      <el-checkbox
        v-for="(option, i) in question.options"
        :key="i"
        :label="option.title"
      ></el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
  export default {
    props: {
      question: Object,
      number: Number,
      changeAnswers: Function
    },
    data() {
      return {
        answer: [],
      };
    },
    methods: {
      changeAnswer(name) {
        var options = this.question.options;
        var id = [];
        for (var i = 0; i < options.length; i++) {
          if (options[i].title == name) {
            id.push(options[i].id);
          }
        }
        this.changeAnswers(this.number, id)
      },
    },
  };
</script>

<style scoped>
.question-area {
  margin-bottom: 20px;
}

.question-area span {
  margin-right: 5px;
}

.number {
  font-weight: bolder;
  font-size: 18px;
}

.title {
  font-size: 18px;
}

.is-required {
  background-size: 100%;
  vertical-align: -2px;
  font-size: 18px;
  color: red;
}

.answer-area {
  font-size: 14px;
}
</style>